<template>
  <Scroll :hasmore="hasmore" :pullup="pullup" setHeight="-65">
    <ul class='my-reward'>
      <li v-for="item in listData">
        <p><span>姓名：</span><span>{{item.name}}</span></p>
        <p><span>电话：</span><span><a :href="'tel:'+item.phone">{{item.phone | formatphone}}</a></span></p>
        <p><span>推荐类型：</span><span>{{item.type}}</span></p>
        <p><span>推荐时间：</span><span>{{item.time}}</span></p>
      </li>
    </ul>
  </Scroll>
</template>
<script>
import Scroll from '../../../common/scroller'
export default {
  components: {Scroll},
  name: "",
  data() {
    return {
      hasmore:false,

      listData:[
        // {
        //   id:1,
        //   name:"老王",
        //   phone:"12345678911",
        //   type:"保养",
        //   time:"2018-5-20"
        // },{
        //   id:1,
        //   name:"老王",
        //   phone:"12345678911",
        //   type:"保养",
        //   time:"2018-5-20"
        // }
      ],
      pageInfo:{
        page:1
      }

    };
  },
  methods: {

    // 下拉刷新方法回调
    pullup(func){
      if(this.hasmore){
        this.pageInfo.page++
         _g.orderList([this.getList,func])
         return
      }
    },

    getList(){
      _g.apiPost("others/haveRecommand.do",{currPageNo:this.pageInfo.page}).then(res=>{
        if(res.status){
          _g.toMessage(res)
          return
        }
        this.hasmore=res.data.hasNextPage
        var goal=[]
        res.data.list.forEach(ele => {
          goal.push({
            id:ele.id,
            name:ele.realName,
            phone:ele.phone,
            type:ele.type==0?"保险":"保养维修",
            time:ele.recommendedTime,
          })
        });
        this.$set(this,"listData",this.listData.concat(goal))
      })
    }
  },
  filters:{
    formatphone(val){
      if(!val)return ""
      return val.slice(0,3)+" "+val.slice(3,7)+" "+val.slice(7)
    }
  },  
  created() {
    this.getList()
  }
};
</script>
<style lang="scss" scoped>
.my-reward {
  background-color: #f2f2f2;
  padding-bottom: 0.1px;

  li{
    background-color: #fff;
    padding: 15px 25px;
    margin-bottom: 5px;

    p{
      font-size: 16px;
      color: #333;
      line-height: 25px;

      span:nth-child(2){
        color: #999;

        a{
          color: #999;
        }
      }
    }
  }
}
</style>